
import React, { useEffect, useState } from 'react';
import service from '../../../api'
import { useNavigate } from 'react-router-dom'
import * as echarts from 'echarts';
import { Space, Table, Tag, Segmented, DatePicker, Tabs } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import "./Zhibo.scss"
import type { TabsProps } from 'antd';





interface Props {

}
interface DataType {
    img: string;
}

function Zhibo(props: Props) {
    var myShu: any = null;
    let [renshulist, setrenshulist] = useState([]);//双线

    let [xi, setxi] = useState([]);//数据明细
    const { RangePicker } = DatePicker;//日期

    const renshu_list = async () => {
        const res = await service.shuju.shuju_zhibo_renhsu();
        console.log(res)
        res.data?.map((item: any) => {
            item.key = item.id
        })
        let green = res.data.map((item: any) => {
            return item.green
        })

        let kedu = res.data.map((item: any) => {
            return item.kedu
        })
        myrenshu(green, kedu);
        //实例化echarts
        setrenshulist(res.data)
    }
    const mingxi = async () => {
        const res = await service.shuju.shuju_zhibo_shuju();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        setxi(res.data)
    }

    useEffect(() => {

        myShu = echarts.init(document.getElementById('renshu') || document.body);

        renshu_list()
        mingxi()
    }, []);
    var myrenshu = (green: any, kedu: any) => {
        // 绘制图表
        myShu.setOption({
            backgroundColor: "#fff",

            title: { //图表的标题
                text: '各类型课程学习时长趋势（h）',
                top: 20,
                left: '30',
                textStyle: {
                    color: 'black',
                    fontSize: 20, // 务必记住设置文字大小只能是数字
                    lineHeight: 30,
                    fontWeight: 'lighter'
                }, // 主标题样式
            },
            grid: {//图标标题之间的距离
                left: '3%',
                right: '5%',
                bottom: '15%',
                top: '20%',
                containLabel: true,
            },

            xAxis: { //x轴设置
                data: kedu

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1200,
                min: 0,
                splitNumber: 6,
                boundaryGap: [0.2, 0.2],
                splitLine: {//虚线
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                stack: 'Total',
            }],

            legend: { //图例
                top: 30,
                left: 1000,
                // data: ['饼图', '销量', '价格']
            },
            calculable: true,
            series: [ //数据系列
                {
                    // name: '视频课程',
                    type: 'bar',//'line' , 'bar' , 'pie'
                    data: green,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            // color: 'green', //折线颜色

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                // color: 'rgba(230,104,78, 0.9)'
                                color: 'rgba(12,220,150, 1)'

                            },
                            {
                                offset: 1,
                                // color: 'rgba(230,104,78, 0.4)'
                                color: 'rgba(12,220,150, 0.3)'

                            }
                            ], false),
                        }
                    }

                },
            ]
        });
    }
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: `今日`,

        },
        {
            key: '2',
            label: `昨日`,

        },
        {
            key: '3',
            label: `最近7天`,

        },
        {
            key: '4',
            label: `最近30天`,

        },
    ];

    const columns: ColumnsType<DataType> = [
        {
            title: '直播信息',
            dataIndex: 'xinxi',
            key: 'xinxi',
        },
        {
            title: '直播间浏览量',
            dataIndex: 'liulan',
            key: 'liulan',
        },
        {
            title: '直播间访客数',
            dataIndex: 'fangke',
            key: 'fangke',
        },
        {
            title: '累计观看人次',
            key: 'kan',
            dataIndex: 'kan',
        },
        {
            title: '累计观看人数',
            key: 'leiji',
            dataIndex: 'leiji',
        },
        {
            title: '平均观看时长',
            key: 'jun',
            dataIndex: 'jun',
        },
        {
            title: '最高在线人数',
            key: 'gao',
            dataIndex: 'gao',
        },
    ];
    return (
        <div className='zhibo'>
            <div className="top">
                <h3>直播分析</h3>
                <h4>统计日期</h4>
                <Space direction="vertical" size={12}>
                    <RangePicker />
                </Space>
                <Tabs items={items} />
            </div>
            <div id="renshu"></div>
            <div className="xia">
                <h3>直播数据</h3>
                <Table columns={columns} dataSource={xi}>
                </Table>
            </div>

        </div>
    );
}

export default Zhibo;